<style lang="less" scoped></style>
<template>
  <div class="app-container">
    <!-- 导航栏 -->
    <el-card style="margin-bottom: 10px" shadow="always" :body-style="{ padding: '0' }">
      <div style="display: flex; line-height: 30px">
        <h1
          v-for="(item, index) in navItems"
          :key="index"
          :class="{ DynamicCondition: isActive === index, spacing: index > 0 }"
          @click="clickToSwitch(index)"
          style="font-size: 11px; cursor: pointer"
        >
          {{ item }}
        </h1>
      </div>
    </el-card>
    <!-- 客户分类 -->
    <div v-show="isActive === 1" class="ProductionDynamic">
      <el-card shadow="always" :body-style="{ padding: '0' }">
        <h1 style="margin-bottom: 10px">单据资料</h1>
        <Find :OriginalFilter="{ static: true }" style="margin-bottom: 10px" :formList="formList" @findClicked="findData" />
      </el-card>

      <el-card style="margin-top: 20px" shadow="always" :body-style="{ padding: '10px' }">
        <div style="width: 30%">
          <h1>单据明细</h1>
          <Table :tableHeader="tableHeader1" :tableData="tableData1" :TableHeight="330" />
        </div>

        <PageModule :PageData="{ pageSizeShow: true }" />
      </el-card>
    </div>

    <!-- 材料分类 -->
    <div v-show="isActive === 0">
      <Find :OriginalFilter="{ static: true }" :formList="formList1" @findClicked="findData" />

      <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '10' }">
        <div style="width: 60%">
          <h1>查询资料</h1>
          <Table :tableHeader="tableHeader" :tableData="tableData1" :TableHeight="230" :selection="true" />
        </div>

        <PageModule :PageData="{ pageSizeShow: true }" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PunchingOutDocumentsAmended'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
// 导航栏
const navItems = ref(['冲刀出库单查询', '冲刀出库单建立'])

// 导航栏状态
const isActive = ref(0)

//点击切换
const clickToSwitch = (index: number) => {
  isActive.value = index
}

const formList1 = ref([
  {
    type: 'date',
    dateLabel: '单据日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '出库类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '车间',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '冲刀',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '部位',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '状态',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '检核'
  }
])

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入单据号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'date',
    dateLabel: '单据日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '出库类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '出库单位',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '选头号',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputValue: '',
    inputLabel: '检核标记'
  },
  {
    type: 'button',
    checkboxLabel: '取楦头号码'
  },
  {
    type: 'button',
    checkboxLabel: '整单删除'
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputValue: '',
    inputLabel: '备注'
  }
])

const findData = (a: any) => {}

// 表格数据
const tableHeader = ref([
  {
    label: '单据号',
    prop: 'slipNo'
  },
  {
    label: '单据日期',
    prop: 'dutyDeptName'
  },
  {
    label: '出库类型',
    prop: 'sysUser'
  },
  {
    label: '出库单位',
    prop: 'name',
    type: 'select'
  },
  {
    label: '仓库'
  },
  {
    label: '冲刀号'
  },
  {
    label: '部位'
  },
  {
    label: '数量'
  },
  {
    label: '检核'
  },
  {
    label: '备注信息'
  }
])

const tableData1 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader1 = ref([
  {
    label: '冲刀号',
    prop: 'slipNo'
  },
  {
    label: '部位',
    prop: 'dutyDeptName'
  },
  {
    label: '库存数量',
    prop: 'name',
    type: 'select'
  },
  {
    label: '出库数量'
  },
  {
    label: '备注信息'
  }
])
</script>

<style lang="less" scoped>
.H1Size {
  font-size: 16px;
}

.bottom {
  float: right;
}

.DynamicCondition {
  color: #f89027;
  border-bottom: 2px solid #f89027;
}

.spacing {
  margin-left: 10px;
  /* 根据需要调整间距大小 */
}

.Header {
  margin-top: 16px;
  display: flex;
}

// 主体
.Main {
  width: 100%;
}

.MainCard {
  width: 100%;
  box-shadow: none;
}

.MainCardDiv {
  width: 50%;
  display: flex;

  .MainCardLeft {
    width: 50%;
    height: 100%;
  }

  .MainCardRight {
    width: 48%;
    height: 100%;
    margin-left: 50px;
    margin-top: -15px;
  }
}

.MainCardLeftH1 {
  font-size: 16px;
  margin-top: 15px;
  margin-left: 10px;
  margin-bottom: 15px;
}

:deep(.el-tree-node:focus > .el-tree-node__content) {
  color: #f89027;
}

:deep(.el-tree-node__content:hover) {
  color: #f89027;
}

:deep(.is-expanded > .el-tree-node__content > .el-tree-node__expand-icon) {
  color: red !important;
}

.MainCardRightTop {
  height: 45%;
  width: 100%;
  padding-top: 20px;
}

.MainCardRightBottom {
  height: 40%;
  width: 100%;
}

.MainCardRightH1 {
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 30px;
}

h1 {
  font-size: 16px;
}
</style>
